﻿{extend name="layout/main-block" /}
{block name="sub-wrapper"}
    <!--内容容器-->
    <section id="sub-wrapper" class="full-screen page-agent">
        <!--数据展示容器-->
        <div id="sub-content">
            <div id="sub-header">
                <div class="sub-title">
                    <h3><i class="fa fa-rocket"></i>代理商--代理商列表</h3>
                </div>
                <div class="sub-tools">
                    <div id="searchTool">
                        <form class="form-inline">
                            <input size="30" class="form-control" id="phname" placeholder="请输入代理商名称进行检索" />
                            <a class="btn btn-primary" id="searchname"><i class="fa fa-search"></i>搜索</a>
                        </form>
                    </div>

                </div>
            </div>

            <div class="table-responsive data-table">
                <table class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th class="text-center" width="34px">
                            <input type="checkbox" class="checkboxes" id="selectAll"/>
                        </th>
                        <th>ID</th>
                        <th>代理商编号</th>
                        <th>名称</th>
                        <th width="160px">联系人</th>
                        <th>手机号码</th>
                        <th>设备数</th>
                        <th>区域</th>
                        <th>组别</th>
                        <th>级别</th>
                        <th width="160px">注册时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {volist name="agent" id="v" empty="$empty" }
                    <tr>
                        <td class="text-center">
                            <input type="checkbox" class="checkboxes" name="checkbox[]"/>
                        </td>
                        <td>{$v.id}</td>
                        <td>{$v.code}</td>
                        <td>{$v.name}</td>
                        <td>{$v.linkman}</td>
                        <td>{$v.mobile}</td>
                        <td>{$v.countid}</td>
                        <td>{$v.regname}</td>
                        <td>{$v.groupname}</td>
                        <td>{$v.levelname}</td>
                        <td>{$v.registered_at}</td>
                        <td>
                            <ul class="record-tool">
                                <li><a class="btn btn-info btn-sm viewRecord" data-name="{$v.id}">查看</a></li>
                                <li><a class="btn btn-warning btn-sm editRecord" data-name="{$v.id}">修改</a></li>
                                <li><a class="btn btn-danger btn-sm delRecord" data-name="{$v.id}">删除</a></li>
                            </ul>
                        </td>
                    </tr>
                    {/volist}
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4">
                            <ul class="record-tool">
                                <li><a class="btn btn-success btn-sm" id="addRecord"><i class="fa fa-plus"></i>
                                    增加</a></li>
                                <li><a class="btn btn-danger btn-sm" id="batchDel"><i class="fa fa-minus"></i>
                                    删除</a></li>
                            </ul>
                        </td>
                        <td colspan="3" class="">
                            {$page}
                        </td>
                        <td colspan="3" class="text-center">
                            <div class="table-summary">
                                <div class="input-group">
                                    <div class="input-group-addon">到第</div>
                                    <input type="text" class="form-control" id="goto" placeholder="" style="width:40px;">
                                    <div class="input-group-addon">页</div>
                                    <span class="input-group-btn">
                                                <a class="btn btn-primary" data-currentPage="{$currentPage}" data-lastPage="{$lastPage}" id="gotoPage"><i class="fa fa-arrow-right"></i>确定</a>
                                            </span>
                                </div>
                            </div>
                        </td>
                        <td colspan="2" class="text-center">
                            共<span id="total-record" class="text-success fa-2x"> {$count} </span>条记录
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </section>

{/block}
{block name="viewRecord"}

<!--编辑工具-->
<div id="viewRecord" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">ID:<span id="recordId"></span></h4>
            </div>
            <div class="modal-body">
                <div class="col-xs-12">
                    <form class="form-horizontal" name="editForm">
                        <!--<input type="hidden" name="admin_group_id" id="admin_group_id" value="" >-->
                        <div class="form-group">
                            <label for="code">代理商编号</label>
                            <input type="text" class="form-control" name="code" id="code" >
                        </div>
                        <div class="form-group">
                            <label for="agentname">名称</label>
                            <input type="text" class="form-control" name="name" id="agentname" >
                        </div>
                        <div class="form-group">
                            <label for="linkman">联系人</label>
                            <input type="text" class="form-control" name="linkman" id="linkman" >
                        </div>
                        <div class="form-group">
                            <label for="mobile">手机号码</label>
                            <input type="number" class="form-control" name="mobile"  id="mobile" >
                        </div>
                        <div class="form-group">
                            <label for="password">登录密码</label>
                            <input type="password" class="form-control" name="password"  id="password" >
                        </div>
                        <!--  省市区三级联动 begin -->
                        <div class="form-group">
                            <label>所在地址</label>
                            <div class="col-sm-4">
                                <select name="province" id="province" class="form-control" >
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select name="city" id="city" class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                            <div class="col-sm-4">
                                <select name="area" id="area" class="form-control">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>

                        <!-- 省市区三级联动  end-->
                        <div class="form-group">
                            <label for="franchiser_group_id">组别</label>
                            <select name="franchiser_group_id" id="franchiser_group_id"  class="form-control">
                                {volist name="aGroup" id="g" empty="$empty" }
                                <option value="{$g.id}">{$g.name}</option>
                                {/volist}
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="franchiser_level_id">级别</label>
                            <select name="franchiser_level_id" id="franchiser_level_id"  class="form-control">
                                {volist name="alevel" id="l" empty="$empty" }
                                <option value="{$l.id}">{$l.name}</option>
                                {/volist}
                            </select>
                        </div>
                    </form>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="modal-footer">
                <a class="btn btn-warning" data-dismiss="modal"><i class="fa fa-times"></i>关闭</a>
            </div>
        </div>
    </div>
</div>
<!--编辑工具-->

{/block}
{block name="javascript"}
<script>
    /** 省市区三级代码查询 **/
   /* var DISTRICTS;
    var provinceCode = '',
        cityCode = '',
        districtCode = '';
    //筛选的地区
    var province_selector = $('#province_selector'),
        city_selector = $('#city_selector'),
        district_selector = $('#district_selector');
    var htm = '<option value="">----请选择-----</option>';
    $.ajax({
        type: 'GET',
        url: '/admin/agent/region',
        dataType: 'json'
    }).done(function (res) {
        DISTRICTS = res;
        htm = '<option value="">----请选择-----</option>';
        for(var key in DISTRICTS['100000']) {
            htm += '<option value="'+key+'">'+DISTRICTS['100000'][key]+'</option>';
        }
        province_selector.html(htm);
        city_selector.html('<option value="">----请选择-----</option>');
        district_selector.html('<option value="">----请选择-----</option>');
    }).fail(function () {
        console.log('获取地区json数据失败');
    });

    province_selector.change(function () {
        provinceCode =province_selector.find('option:selected').val();
        console.log(provinceCode);
        htm = '<option value="">----请选择-----</option>';
        for(var key in DISTRICTS[provinceCode]) {
            htm += '<option value="'+key+'">'+DISTRICTS[provinceCode][key]+'</option>';
        }
        city_selector.html(htm);
        district_selector.html('<option value="">----请选择-----</option>');
    });
    city_selector.change(function () {
        cityCode =city_selector.find('option:selected').val();
        console.log(cityCode);
        htm = '<option value="">----请选择-----</option>';
        for(var key in DISTRICTS[cityCode]) {
            htm += '<option value="'+key+'">'+DISTRICTS[cityCode][key]+'</option>';
            district_selector.html(htm);
        }
    });
    district_selector.change(function () {
        districtCode =district_selector.find('option:selected').val();
        console.log(districtCode);
    });*/
    0.
    $(function() {

        // 初始化省市区
        initAddress();

        // 更改省份后的操作
        $("select[name='province']").change(function() {

            var provCode = $("select[name='province']").val();

            getCity(provCode);

        });

        // 更改城市后的操作
        $("select[name='city']").change(function() {
            var cityCode = $("select[name='city']").val();
            getArea(cityCode);
        });

    });

    function initAddress() {

        var firstProvCode;
        // ajax请求所有省份
        $.get("/admin/agent/province", {
            method : "initProvince"
        }, function(data) {
            $.each(data.data, function(i, d) {
                $("select[name='province']").append(
                    "<option value='"+d.id+"'>" + d.name
                    + "</option>");
            });

            // 获取第一个省份的code
            firstProvCode = data.data[0].id;
            // 根据第一个省份code获取对应城市列表
            getCity(firstProvCode);
        }, 'json');

    }

    //获取对应城市列表（里面包括获取第一个城市的区县列表）
    function getCity(provCode) {

        var firstCityCode;

        // ajax请求所有市级单位
        $.get("/admin/agent/city", {
            method : "getCity",
            provCode : provCode
        }, function(data) {

            // 先清空城市下拉框
            $("select[name='city']").empty();

            $.each(data.data, function(i, d) {
                $("select[name='city']").append(
                    "<option value='"+d.id+"'>" + d.name
                    + "</option>");
            });

            // 获取第一个城市的code
            firstCityCode = data.data[0].id;
            // 根据第一个城市code获取对应区县列表
            getArea(firstCityCode);

        }, 'json');
    }

    function getArea(cityCode) {

        // ajax请求所有区县单位
        $.get("/admin/agent/area", {
            method : "getArea",
            cityCode : cityCode
        }, function(data) {

            // 先清空区县下拉框
            $("select[name='area']").empty();
            $.each(data.data, function(i, d) {
                $("select[name='area']").append(
                    "<option value='"+d.id+"'>" + d.name
                    + "</option>");
            });
        }, 'json');
    }

</script>
{/block}